<template>
	<view class="nav">
		<view :style="'height:'+ status + 'rpx;' + containerStyle"></view>
		<view v-if="isHome" class="headNav" :style="'height:' + navHeight + 'rpx;line-height:' + navHeight + 'rpx;padding-left:20rpx;'">
			<text class="city">厦门</text>
			<view style="flex: 1;">
				<navigator
				:style="
				'height:' +
				 menu.height*2 + 
				 'rpx;line-height:' +
				  menu.height*2 + 
				  'rpx;margin-top:' + 
				  (menu.top*2 - status)+ 
				  'rpx;margin-left:32rpx;margin-right:'+
				  (menu.width*2 + 24) + 
				  'rpx;background:#f4f4f4;border-radius:200rpx;text-align:center;'
				  ">
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<view v-else class="navbar" :style="'height:'+ navHeight + 'rpx;' + containerStyle">
			<view class="back-icon" @click="backOrHome">
				<image v-if="pages > 1" src="../../static/icon/ic_back.png" mode=""></image>
				<image v-else src="../../static/icon/ic_home.png" mode=""></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:' + navHeight + 'rpx; line-height:' + navHeight + 'rpx;' + textStyle">
					{{titleText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, reactive, defineProps, onBeforeMount} from 'vue';
	const props = defineProps({
		background:{
			type:String,
			default: 'rgba(255,255,255,1)'
		},
		color:{
			type: String,
			default:'rgba(0,0,0,1)'
		},
		fontSize:{
			type: String,
			default:32
		},
		iconWidth:{
			type:String,
			default:116
		},
		iconHeight:{
			type:String,
			default:38 
		},
		titleText:{
			type:String,
			default:''
		},
		isHome:{
			type:Boolean,
			default:false
			
		}
	})
	const emits = defineEmits(['navBarAttached'])
	
	onBeforeMount(() => {
		setNavSize()
		setStyle()
		emits('navBarAttached',{
			detail:{
				statusHeight: status.value,
				navHeight: navHeight.value,
				navBarHeight: status.value + navHeight.value
			}
		})
	})
	
	//状态栏高度
	const status = ref(0)
	//内容高度
	const navHeight = ref(0)
	//背景颜色
	const containerStyle = ref('')
	//字体样式
	const textStyle = ref('')
	//图标样式
	const iconStyle = ref('')
	//样式设置
	const setStyle = () => {
		containerStyle.value = ['background' + props.background].join(';')
		textStyle.value = ['color' + props.color, 'font-size'+ props.fontSize + 'rpx'].join(';')
		iconStyle.value = ['width' + props.iconWidth + 'rpx', 'height' + props.iconHeight + 'rpx'].join(';')
	}
	//页面栈数量
	const pages = ref(getCurrentPages().length)
	const backOrHome = () => {
		if(pages.value > 1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
	//获取胶囊按钮的位置
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
	
	//计算状态栏高度
	const setNavSize =()=>{
		const { system, statusBarHeight} = uni.getSystemInfoSync()
		status.value = statusBarHeight * 2
		const isios = system.indexOf('ios') > -1 
		if(!isios){
			navHeight.value = 96
		}else{
			navHeight.value = 88
		}
	}
	
</script>

<style lang="less">
	.nav{
		position: sticky;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		background: #FFFFFF;
		.headNav{
			display: flex;
		}
		.navbar{
			position: relative;
			.back-icon{
				display: flex;
				align-items: center;
				width: 64rpx;
				height: 100%;
				margin-left: 20rpx;
				image{
					width: 64rpx;
					height: 64rpx;
				}
			}
			.nav-title{
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%);
			}
		}
	}
	.city {
	    display: inline-block;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bold;
	    padding-left: 55rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 40rpx;
	}
	
	.city:after {
	    content: ' ';
	    display: inline-block;
	    height: 6px;
	    width: 6px;
	    border-width: 1px 1px 0 0;
	    border-color: #353535;
	    border-style: solid;
	    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    position: relative;
	    top: -2px;
	    position: absolute;
	    top: 50%;
	    margin-top: -4px;
	    right: -10px;
	}
	.search-text {
	    display: inline-block;
	    padding-left: 30rpx;
	    color: #bbbbbb;
	    font-size: 26rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 23rpx;
	}
</style>